<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-stock__pig}">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
        <el-form-item>
          <el-select v-model="dataForm.houseId" placeholder="猪舍" clearable>
            <el-option
                v-for="item in houses"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
          <!-- <pig-tree :props="props"
            :options="optionData"
            :value="valueId"
            :filter="0"
            :clearable="isClearable"
            :accordion="isAccordion"
            @getValue="getValue($event)"></pig-tree> -->
          <el-autocomplete v-model="dataForm.earmark" :fetch-suggestions="queryPigAsync" placeholder="耳号" clearable style="width: 120px;margin-left: 10px;"></el-autocomplete>
          <el-input-number v-model="dataForm.parity" placeholder="胎次" controls-position="right" :min="1" :max="20" style="width: 100px; margin-left: 0px;"></el-input-number>
          <RenSelect dictType="gender" placeholder="性别" v-model="dataForm.gender" clearable style="margin-left: 10px;"></RenSelect>
          <RenSelect dictType="pig_status" placeholder="状态" v-model="dataForm.state" clearable style="margin-left: 10px;"></RenSelect>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList()">{{ $t('query') }}</el-button>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button v-if="$hasPermission('stock:pig:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
<!--          <el-button v-if="$hasPermission('stock:pig:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>-->
<!--        </el-form-item>-->
        <!-- <el-form-item class="pull-right">
          <el-button @click="introduceHandle()" type="success">{{ $t('introduce') }}</el-button>
        </el-form-item>
        <el-form-item class="pull-right">
          <el-button @click="transferHandle()" type="warning">{{ $t('transfer') }}</el-button>
        </el-form-item>
        <el-form-item class="pull-right">
          <el-button @click="leaveHandle()" type="info">{{ $t('leave') }}</el-button>
        </el-form-item>
        <el-form-item class="pull-right">
          <el-button @click="saleHandle()" type="info">{{ $t('sale') }}</el-button>
        </el-form-item>
        <el-form-item class="pull-right">
          <el-button @click="showUpload()">{{ $t('batchImport') }}</el-button>
        </el-form-item> -->
        <!-- <el-form-item class="pull-right" size="small">
          <el-radio-group v-model="display">
            <el-radio-button label="表格"></el-radio-button>
            <el-radio-button label="栏位"></el-radio-button>
          </el-radio-group>
        </el-form-item> -->
      </el-form>
      <template v-if="display=='栏位'">
        <span v-for="house in houses" v-bind:key="house.id">{{house.rows}} * {{house.column}}</span>
        <div v-for="house in houses" v-bind:key="house.id">
          <el-table></el-table>
        </div>
      </template>
      <template v-if="display!='栏位'">
        <el-table  v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle" style="width: 100%;">
<!--        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
<!--        <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>-->
          <el-table-column prop="houseName" label="猪舍" sortable="custom" header-align="center" align="center"></el-table-column>
          <el-table-column prop="earmark" label="耳号" sortable="custom" header-align="center" align="center"></el-table-column>
          <el-table-column prop="gender" label="性别" sortable="custom" header-align="center" align="center">
            <template slot-scope="scope">
              {{ $getDictLabel("gender", scope.row.gender) }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="月龄" sortable="custom" header-align="center" align="center"></el-table-column>
          <el-table-column prop="parity" label="胎次" sortable="custom" header-align="center" align="center"></el-table-column>
          <el-table-column prop="grid" label="栏位" sortable="custom" header-align="center" align="center"></el-table-column>
          <!-- <el-table-column prop="sources" label="来源" sortable="custom" header-align="center" align="center">
            <template slot-scope="scope">
              {{ $getDictLabel("source", scope.row.sources) }}
            </template>
          </el-table-column> -->
          <el-table-column prop="state" label="种猪状态" sortable="custom" header-align="center" align="center">
            <template slot-scope="scope">
              {{ scope.row.gender ? $getDictLabel("pig_status", scope.row.state) : $getDictLabel("boar_status", scope.row.state) }}
            </template>
          </el-table-column>
          <el-table-column prop="stateDays" label="状态天数" sortable="custom" header-align="center" align="center"></el-table-column>
          <el-table-column prop="inDate" label="进场日期" sortable="custom" header-align="center" align="center"></el-table-column>
  <!--        <el-table-column prop="birthDate" label="出生日期" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="dayAge" label="日龄" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="age" label="月龄" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="birthWeight" label="出生重" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="siblings" label="同窝数" header-align="center" align="center"></el-table-column>-->
          <el-table-column prop="breed" label="品种" header-align="center" align="center">
            <template slot-scope="scope">
              {{ $getDictLabel("breed", scope.row.breed) }}
            </template>
          </el-table-column>
          <el-table-column prop="strain" label="品系" header-align="center" align="center">
            <template slot-scope="scope">
              {{ $getDictLabel("strain", scope.row.strain) }}
            </template>
          </el-table-column>
  <!--        <el-table-column prop="pedigree" label="血统" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="father" label="父耳号" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="fatherIndex" label="父系指数" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="mother" label="母耳号" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="motherIndex" label="母系指数" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="breedIndex" label="繁殖指数" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="inbreed" label="近交系数" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="outStatus" label="是否离场 1是" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="outType" label="离场类型" header-align="center" align="center"></el-table-column>-->
          <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
  <!--        <el-table-column prop="tenantId" label="" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column>-->
  <!--        <el-table-column prop="updateDate" label="更新时间" header-align="center" align="center"></el-table-column>-->
          <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
            <template slot-scope="scope">
  <!--            <el-button v-if="$hasPermission('stock:pig:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>-->
              <!-- <el-button v-if="$hasPermission('stock:pig:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)" style="padding: 8px 4px;">详情</el-button>
              <el-button v-if="$hasPermission('stock:pig:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> -->
              <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)" style="padding: 8px 4px;">详情</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </template>
      <!-- 弹窗, 新增 / 修改 -->
      <add-modal v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" model="pig"></add-modal>
      <breed-introduce v-if="introduceVisible" ref="refBreedIntroduce" @refreshDataList="getDataList" @uploadModal="showUpload"></breed-introduce>
      <breed-transfer v-if="transferVisible" ref="refBreedTransfer" @refreshDataList="getDataList"></breed-transfer>
      <breed-leave v-if="leaveVisible" ref="refBreedLeave" @refreshDataList="getDataList"></breed-leave>
      <breed-sale v-if="saleVisible" ref="refBreedSale" @refreshDataList="getDataList"></breed-sale>
      <!-- 弹窗, 上传文件 -->
      <upload v-if="uploadVisible" ref="upload"></upload>
    </div>
  </el-card>
</template>

<script>/* eslint-disable */
import mixinViewModule from '@/mixins/view-module'
import AddModal from '@/views/modules/stock/pig/add-or-update'
import BreedIntroduce from "@/views/modules/stock/pig/breed-introduce";
import BreedTransfer from "@/views/modules/stock/pig/breed-transfer";
import BreedLeave from "@/views/modules/stock/pig/breed-leave";
import BreedSale from "@/views/modules/stock/pig/breed-sale";
import Upload from "@/views/modules/oss/oss-uploadbreed";
import PigTree from '@/views/modules/components/pig-tree'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/stock/pig/page',
        getDataListIsPage: true,
        exportURL: '/stock/pig/export',
        deleteURL: '/stock/pig',
        deleteIsBatch: true
      },
      dataForm: {
        id: '',
        state:'',
        gender:'',
        earmark:'',
        houseId:'',
        sources:''
      },
      houses:[],
      uploadVisible: false,
      introduceVisible: false,
      transferVisible: false,
      leaveVisible: false,
      saleVisible: false,
      display: '',
      pigs: []
    }
  },
  components: {
    'breed-introduce': BreedIntroduce,
    'breed-transfer': BreedTransfer,
    'breed-leave': BreedLeave,
    'breed-sale': BreedSale,
    Upload,
    AddModal,
    PigTree
  },
  mounted() {
    this.getHouses()
    this.getPigs()
  },
  methods: {
    getHouses () {
      this.$http.get(`/basic/house/all`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        this.houses = res.data;
      }).catch(() => {})
    },
    getPigs () {
      let that = this;
      that.pigs = [];
      this.$http.get(`/stock/pig/getAllEarMarks`).then(({ data: res }) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg)
        }
        res.data.forEach(function(earmark){
          that.pigs.push({value: earmark});
        });
        this.$forceUpdate()
      }).catch(() => {})   
    },
    queryPigAsync(queryString, cb) {
      var pigs = this.pigs;
      var results = queryString ? pigs.filter(this.createStateFilter(queryString)) : pigs;
      cb(results);
    },
    createStateFilter(queryString) {
      return (earmark) => {
        let equal = (earmark.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1);
        return equal;
      };
    },
    introduceHandle (id) {
      this.introduceVisible = true
      this.$nextTick(() => {
        this.$refs.refBreedIntroduce.dataForm.id = id
        this.$refs.refBreedIntroduce.init()
      })
    },
    transferHandle (id) {
      this.transferVisible = true
      this.$nextTick(() => {
        this.$refs.refBreedTransfer.dataForm.id = id
        this.$refs.refBreedTransfer.init()
      })
    },
    leaveHandle (id) {
      this.leaveVisible = true
      this.$nextTick(() => {
        this.$refs.refBreedLeave.dataForm.id = id
        this.$refs.refBreedLeave.init()
      })
    },
    saleHandle (id) {
      this.saleVisible = true
      this.$nextTick(() => {
        this.$refs.refBreedSale.dataForm.id = id
        this.$refs.refBreedSale.init()
      })
    },
    showUpload () {
      this.uploadVisible = true
      this.$nextTick(() => {
        this.$refs.upload.init()
      })
    }
  }
}
</script>
